<script setup>
  import AppHeader from "@/components/AppHeader.vue";
  import { ref } from "vue";
  import { Search } from "@/utils/config.js";
  import { useCartStore } from '../stores/cart.js';
  import {useRouter} from 'vue-router';
  import {SearchStore} from '../stores/SearchList.js'
  const Search2 = SearchStore()
  const router = useRouter();
  const cartStore = useCartStore();
  const list = ref('');

  const Search1 = async (query) => {
    const res = await Search(query);
    Search2.SearchList = res.data.rows
    console.log(Search2.SearchList)
    return Array.isArray(res) ? res : [];
  };
  const handleSearch = async () => {
    const query = list.value.trim();
    if (!query) {
      alert('请输入搜索关键词');
      return;
    }
    const products = await Search1(query);
    const matchedProduct = products.find(product => product.name.toLowerCase().includes(query.toLowerCase()));
    if (matchedProduct) {
      await router.push({
        path: '/Goods',
        query: {
          name: matchedProduct.name,
          price: matchedProduct.price,
          description: matchedProduct.description,
          image: encodeURIComponent(matchedProduct.image),
          stock: matchedProduct.stock,
          id: matchedProduct.id,
          //matchedProduct
        },
      });
    }
  };
</script>

<template>
  <div class="header">
    <div class="w">
<!--上面区域-->
    <div class="header-top">
<!--      logo-->
      <div class="logo">
         <router-link to="/"></router-link>
      </div>
<!--      搜索-->
      <div class="center">
        <div class="center-search">
          <input type="text" name="" id="" placeholder="618" v-model="list">
          <button class="search-btn" @click="handleSearch">搜索</button>

        </div>
        <!-- 搜索下面的导航 -->
        <ul class="center-navs">
          <li>
            <a href="#">美食</a>
          </li>
          <li>
            <a href="#">餐厨</a>
          </li>
          <li>
            <a href="#">艺术</a>
          </li>
          <li>
            <a href="#">电器</a>
          </li>
          <li>
            <a href="#">居家</a>
          </li>
          <li>
            <a href="#">洗护</a>
          </li>
          <li>
            <a href="#">孕婴</a>
          </li>
          <li>
            <a href="#">服装</a>
          </li>
          <li>
            <a href="#">杂货</a>
          </li>
        </ul>
      </div>
<!--      购物车-->
      <div class="cart" @click="router.push({path:'/cart'})">
        <a href="##">
          <i class="icon-gouwuchekong"></i>
          购物车
          <em>{{ cartStore.itemCount }}</em>
        </a>
      </div>
    </div>
<!--    二级导航-->
    <AppHeader/>
  </div>
  </div>
</template>

<style scoped>
.header {
  height: 120px;
  padding: 25px 0 0 0;
  background-color: #fff;
  box-shadow: inset 0px -2px 10px rgba(183, 182, 182, 0.5);
}

.header .header-top {
  display: flex;
}

.header .header-top .logo {
  width: 330px;
  height: 60px;
}

.header .header-top .logo a {
  display: inline-block;
  height: 60px;
  width: 100%;
  background-image: url("../assets/image/pic.jpg");
  background-size: cover;
  background-repeat: no-repeat; /* 可能需要添加这个属性来防止背景图像重复 */
  background-position: center; /* 可能需要添加这个属性来定位背景图像 */
}

.header .header-top .center {
  flex: 1;
}

.header .header-top .center .center-search {
  width: 540px;
  height: 35px;
}

.header .header-top .center .center-search input {
  width: 440px;
  height: 35px;
  border: 1px solid #27ba9b;
  border-radius: 20px 0 0 20px;
  padding-left: 15px;
  box-sizing: border-box;
}

.header .header-top .center .center-search .search-btn {
  float: right;
  width: 100px;
  height: 35px;
  color: #fff;
  background-color: #27ba9b;
  border-radius: 0 20px 20px 0;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}

.header .header-top .center .center-navs {
  width: 540px;
}

.header .header-top .center .center-navs li {
  float: left;
  height: 32px;
  padding: 5px;
}

.header .header-top .center .center-navs li a {
  padding: 0 5px;
  border-right: 1px solid #ccc;
}

.header .header-top .center .center-navs li a:hover {
  color: #27ba9b;
}

.header .header-top .center .center-navs li:last-child a {
  border-right: 0;
}

.header .header-top .cart {
  box-sizing: border-box;
  width: 138px;
  height: 38px;
  line-height: 32px;
  border-radius: 20px;
  border: 1px solid #27ba9b;
  font-size: 15px;
  text-align: center;
}

.header .header-top .cart:hover {
  background-color: #f5f3ef;
}

.header .header-top .cart a {
  color: #27ba9b;
  text-decoration: none; /* 可能需要添加这个属性来去除链接的下划线 */
}

.header .header-top .cart i {
  font-size: 16px;
  color: #27ba9b;
}

.header .header-top .cart em {
  color: #fff;
  background-color: red;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  width: 11px;
  height: 9px;
  line-height: 10px;
  font-size: 10px;
  vertical-align: middle; /* 使用这个属性来垂直居中 */
  margin-left: 5px;
}
.header .header-top .cart .icon-gouwuchekong {

}
</style>